<template>
  <view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
    <view class="index-kecheng">
      <view class="index-content-qy" v-if="list.length">
        <block v-for="(item, index) in list" :key="index">
          <view class="video-content" @tap="goto_detail(item)">
            <image class="video-content-img" :src="item.cover"></image>
            <view class="video-content-flex">
              <view>
                <view class="video-content-h1">{{item.title}}</view>
              </view>
              <view class="video-content-learn">
                <view class="video-content-detail">
                  <view class="video-content-detail-price video-content-detail-free" v-if="item.price==0.00">免费</view>
                  <view class="video-content-detail-price" v-else>￥{{item.price}}</view>
                  <view class="video-content-detail-r" v-if="item.price!=0.00">
                    <view v-if="item.vip_price==0.00" style="color: #ff4a4a">免费</view>
                    <view v-else>￥{{item.vip_price}}</view>
                    <image class="video-content-detail-img" :src="static_media.img01"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    </mescroll-body>
  </view>
</template>
<script>
  import {mapState} from 'vuex';
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'

  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
        // 下拉刷新的配置(可选, 绝大部分情况无需配置)
        downOption: {
          use: false, // 是否启用下拉刷新; 默认true
          auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
          native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
        },
        // 上拉加载的配置(可选, 绝大部分情况无需配置)
        upOption: {
          page: {
            num: 0,
            size: 10 // 每页数据的数量,默认10
          },
          noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
          empty: {
            tip: '暂无相关数据'
          }
        },
        // 列表数据
        list: []
      };
    },
    onShow(){
      this.canReset && this.mescroll.resetUpScroll() // 自行实现的刷新指定一条数据
      this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
    },
    computed: {
      ...mapState(['userInfo']),
      static_media () {
        return {
          img01: this.$lib.$config.localMedia + '/static/img/vip-price.png',
        }
      }
    },
    components: {
    },
    methods: {
      /*上拉加载的回调*/
      async upCallback(page,item) {
        let pageNum = page.num; // 页码, 默认从1开始
        let pageSize = page.size; // 页长, 默认每页10条

        let res = await this.$lib.$http.post({
          url:this.$lib.$urlMap.record,
          data: {
            page: pageNum,
            limit: pageSize
          },
          needLogin: true
        })
        if (res.code == 1) {
          this.personList = res.data.data;
          // 接口返回的当前页数据列表 (数组)
          let curPageData = res.data.data;
          // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
          let curPageLen = curPageData.length;
          // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
          // let totalPage = data.xxx;
          // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
          let totalSize = res.data.total;

          this.mescroll.endBySize(curPageLen, totalSize);
          if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
          this.list = this.list.concat(curPageData); //追加新数据
          /* for (let i = 0, leng = this.personList.length; i < leng; i++) {
              this.personList[i].pay_time = this.$myUtils.formatDate(this.personList[i].pay_time * 1000, 'Y年M月D日 h:m:s')
          } */
        } else {
          this.mescroll.endErr()
        }
      },
      goto_detail(item) {
        uni.navigateTo({
          url: '/pages/index/detail?id=' + item.id
        })
      }
    }
  };
</script>
<style>
  page {
    background: #f6f7f9;
  }
  /*课程列表*/
  .index-kecheng {
    background: #fff;
  }
  .index-content-qy {
    padding-top: 12px;
    width: 93%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .index-content-qy .video-content {
    margin-bottom: 13px;
    display: flex;
    align-items:self-start;
    padding-top: 0;
    border-bottom: solid 1px #f5f5f5;
    padding-bottom: 13px;
  }
  .index-content-qy .video-content:last-child {
    border-bottom: none!important;
    padding-bottom: 0;
  }
  .video-content-img {
    width: 114px;
    height: 82px;
    border-radius: 5px;
  }
  .video-content-flex {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
    flex: 1;
    padding-left: 12px;
    height: 82px;
    justify-content: space-between;
  }
  .video-content-h1 {
    color: #000;
    font-size: 16px;
    line-height: 20px;
    padding-bottom: 4px;
  }
  .video-content-learn {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
  }
</style>
